<ui:composition template="templateCliente.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

	<ui:define name="adminModificar">
		<style>		
			.ui-widget-content { border: none; padding: 5px; }			
			.ui-widget-content tr td { border: none; color: #00708C; font-family: 'Lato',sans-serif; }
			.ui-button { padding:0px; }
			/* Importante! es para que no muestre el nombre del tipo de elemento en los botones de primefaces */
			.ui-button-text { display: none; }			
			/* Importante! es para que queden los iconos en los botones de primefaces */
			.ui-widget select, .ui-widget button { font-family: 'Glyphicons Halflings'; }
			/* Deja transaprente el form de subida de archivos */
			.ui-fileupload-buttonbar, .ui-widget-header, .ui-corner-top, .ui-fileupload-content, .ui-widget-content { background-color:transparent; }
		</style>
		
		<p:growl id="mensajes" showDetail="true" life="2000" />	

		<div class="well">
		
			<h:form enctype="multipart/form-data" id="form1" styleClass="form-horizontal">
					
				<fieldset>			
								
				<legend>Cliente  |  Editar Informacion</legend>				
												
				<p:growl id="mensajes" showDetail="true" life="2000" sticky="true" autoUpdate="true"/>
	
				<div class="form-group">
				
					<h:outputLabel value="Foto " styleClass="control-label col-lg-2"/>
					<div class="col-lg-6 row-lg-3">
						<div class="input-group pull-left">
							<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>					
							<p:fileUpload fileUploadListener="#{utilsBean.subirImagen}"
										allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
										update="mensajes" sizeLimit="10000000" auto="true" multiple="false"
										label="Seleccionar">
										
								<p:graphicImage value="/Imagenes/Logos/#{loginBean.email}"
												styleClass="media-object logo pull-left"
												width="100" height="100" id="imgAdmin"
												style="margin: 10px; border: 2px solid #333333;"/>
											
							</p:fileUpload>
						</div>
					</div>

				</div>

				<div class="form-group">
					<h:outputLabel value="Nick " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>					
							<p:inputText label="Nick" value="#{clienteBean.nick}" placeholder="Nick" styleClass="form-control" />
						</div>
					</div>
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Nombre Completo" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
							<p:inputText label="Nombres" value="#{clienteBean.nomCompleto}" placeholder="Nombres" styleClass="form-control"></p:inputText>
						</div>
					</div>
				</div>

				<div class="form-group">
					<h:outputLabel value="Apellidos" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>					
							<p:inputText label="Apellidos" value="#{clienteBean.apellido}" placeholder="Apellidos" styleClass="form-control"></p:inputText>
						</div>
					</div>
				</div>
					
				<div class="form-group">
			        <h:outputLabel value="Fecha de Nacimiento " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>					
							<p:calendar value="#{clienteBean.fechaNto}" pattern="dd/MM/yyyy"
										required="true" placeholder="Fecha de Nacimiento" 
										styleClass="input form-control" label="Fecha de Nacimiento">
							</p:calendar>
						</div>
					</div>
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Movil" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
							<p:inputText label="Movil" value="#{clienteBean.movil}" placeholder="Movil" styleClass="form-control"></p:inputText>
						</div>					
					</div>
				</div>
				
				<div class="form-group">
					<h:outputLabel value="Sexo" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>					
							<h:selectOneMenu label="Sexo" id="sexo" value="#{clienteBean.sexo}" effect="fade" styleClass="form-control">
								<f:selectItem itemLabel="Femenino" itemValue="F" />
					            <f:selectItem itemLabel="Masculino" itemValue="M" />
					        </h:selectOneMenu>
				        </div>
					</div>
				</div>
					
				<div class="form-group" style="text-align:center; margin: auto;">				
					<br />
					
					<a href="#{request.contextPath}/market/index.xhtml" style="margin: 20px;"><button class="btn btn-default">Cancelar</button></a>
			             
		         	<h:commandLink id="regButton" value="Modificar" update="mensajes"
			             actionListener="#{clienteBean.modificarCliente}"
			             styleClass="btn btn-primary" style="margin: 20px;"/>
				</div>
			             
				</fieldset>		             
			
			</h:form>
		</div>
	
	</ui:define>

</ui:composition>